<template>
  <div style="height: 100vh; overflow: hidden; background-color: white">
    <div style="height: 15vh">
      <svg-icon icon-class="loginBg1" style="width: 100%; height: 100%" />
    </div>

    <div style="height: 55vh; padding: 0 20px">
      <div class="title1">Hello!</div>
      <div class="title2">欢迎登录教务系统</div>
      <van-form @submit="onSubmit" class="pdt20" v-if="showLogin">
        <van-cell-group>
          <van-field
            v-model="Account"
            name="登录账户"
            label=""
            placeholder="登录账户"
            :rules="[{ required: true, message: '请填写' }]"
            left-icon="manager"
          />
          <van-field
            v-model="Password"
            :type="showPWD ? 'text' : 'password'"
            name="登录密码"
            label=""
            placeholder="登录密码"
            left-icon="lock"
            :rules="[{ required: true, message: '请填写' }]"
            :right-icon="showPWD ? 'eye-o' : 'closed-eye'"
            @click-right-icon="showPWD = !showPWD"
          />
        </van-cell-group>
        <div style="margin: 50px 16px 0">
          <van-button
            round
            block
            type="primary"
            :disabled="disabled"
            native-type="submit"
            color="linear-gradient(to right, #3A56F4, #6152F5)"
          >
            绑定账户
          </van-button>
        </div>
      </van-form>
    </div>
    <div style="height: 30vh">
      <svg-icon icon-class="loginBg2" style="width: 100%; height: 100%" />
    </div>
  </div>
</template>

<script setup name="LoginM">
import { onMounted, ref } from 'vue';
import useUserStore from '@/store/modules/user.js';
import { useRoute, useRouter } from 'vue-router';
import {
  getToken,
  setToken,
  getRefeshToken,
  setRefeshToken
} from '@/utils/auth.js';
import {
  GetWxCorpInfo,
  CodeExchangeToken,
  BindAccount
} from '@/api/wx/index.js';

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const Account = ref('');
const Password = ref('');
const disabled = ref(false);
const groupChecked = ref();
const showLogin = ref(false);
const showPWD = ref(false);
const CorpInfo = ref({});
async function onSubmit(values) {
  if (values) {
    try {
      let query = {
        Account: Account.value,
        Password: Password.value,
        Code: route.query.code
      };
      // await useUserStore().login(query);

      await BindAccount(query);
      disabled.value = true;
      proxy.$modal.toast('绑定成功');
      setTimeout(() => {
        disabled.value = false;
        getCallbackCode('codeLoading');
      }, 1500);
    } catch (error) {
      setTimeout(() => {
        getCallbackCode('second');
      }, 1500);
      console.log(error);
    }
  }
}

onActivated(() => {
  if (getToken()) {
    return router.push('/');
  } else {
    init();
  }
});

onMounted(() => {
  if (getToken()) {
    return router.push('/');
  } else {
    init();
  }
});

async function init() {
  await getWxCorp();
  if (!route.query.code && !route.query.state) {
    getCallbackCode('codeLoading');
  } else if (!route.query.code && route.query.state == 'bind') {
    getCallbackCode('second');
  } else {
    //自动登录
    if (route.query.state == 'codeLoading') {
      //使用code登录
      codeLogin();
    }
    if (route.query.state == 'second') {
      //显示登录
      showLogin.value = true;
    }
  }
}

async function getWxCorp() {
  try {
    let res = await GetWxCorpInfo();
    CorpInfo.value = res.data.data;
  } catch (error) {
    console.log(error);
  }
}

async function codeLogin() {
  try {
    let res = await CodeExchangeToken({ Code: route.query.code });
    setToken(res.data.Token);
    setRefeshToken(res.data.RefreshToken);
    router.push('/');
  } catch (error) {
    console.log(error);
    setTimeout(() => {
      getCallbackCode('second');
    }, 1500);
  }
}

function getCallbackCode(state = '') {
  let url = '';
  let appid = CorpInfo.value.corpId;
  if (route.query.return) {
    url = 'https://www.wanqusystem.com:9000?return=' + route.query.return;
  } else {
    url = 'https://www.wanqusystem.com:9000/';
  }
  url = encodeURIComponent(url);
  let baseUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize';
  let oauth = `${baseUrl}?appid=${appid}&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=${state}&agentid=AGENTID#wechat_redirect`;
  window.location.href = oauth;
}
</script>

<style lang="scss" scoped>
.title1 {
  font-size: 30px;
  color: #3a56f4;
  font-weight: bold;
  padding-left: 20px;
  padding-top: 10px;
}
.title2 {
  font-size: 26px;
  color: #3a56f4;
  padding-left: 20px;
  padding-top: 10px;
  // font-weight: bold;
}
:deep(.van-cell) {
  padding-top: 30px;
}
:deep(.van-field__left-icon) {
  width: 30px;
  color: #5f63d0;
  i {
    font-size: 24px;
  }
}
:deep(.van-field__right-icon){
  i{
    font-size: 24rpx;
  }
}
</style>
